
<template>
  <div class="image1">
  </div>

  <div class="LoginPanel">

        
        <div class="head">
            <div class="weamLogo">
                <img src="/src/assets/indexStatic/images/index/u304.svg"/>
            </div>
            <div class="weam">
                <p><span>WEAM</span></p>
            </div>
            <router-link to="/">
                <div class="hotspot"></div>
            </router-link>
        </div>
        

        <div class="form">
        <el-form class="loginForm" ref="loginForm">
            <el-form-item>
                <el-input v-model="telephone" placeholder="请输入手机号" clearable style="width:100%; margin-bottom:5px">
                    <template #prefix>
                        <i class="iconfont icon-shouji"></i>
                        <!-- <el-icon style="width: 20px; height: 20px; margin-top: 15px"><phone /></el-icon> -->
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="password" placeholder="请输入密码" clearable show-password style="width:100%; margin-bottom:5px">
                    <template #prefix>
                        <i class="iconfont icon-suo"></i>
                        <!-- <el-icon style="width: 20px; height: 20px; margin-top: 15px"><lock /></el-icon> -->
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <JcRange  status="status"></JcRange>
            </el-form-item>
            <el-form-item class="remember">
                <el-checkbox label="记住我" v-model="remember"></el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" round=true style="width:100%;" color="#09308C">
                    <span class="loginBtn">登&nbsp;&nbsp;&nbsp;&nbsp;录</span>
                </el-button>
            </el-form-item>
        </el-form>
        </div>

        <div class="router1">
            <router-link to="/Login/Register">
                <p><span class="toRegister">快速注册</span></p>
            </router-link>
        </div>
    </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import JcRange from "../Login/JcRange.vue"
import { ElMessage } from 'element-plus'


export default {
  components: {
    JcRange
  },
  data(){
      return{
        telephone:"",
        password:"",
        remember:false,
      }
  },
  methods:{
    onSubmit(){
        ElMessage({
            message: '登录成功',
            type: 'success',
            duration: 1000
        })
        this.$router.push({ path:'/MainMap' })
    }
  },
}

</script>

<style>
.LoginPanel{
    background-size: 100% 100%;
    width: 390px;
    height: 490px;
    position: relative;
    align-self:center;
    margin-top: 150px;
}
.image1{
    background-image: url(/src/assets/img/Login/登录框.svg);
    background-size: 100% 100%;
    width: 390px;
    height: 490px;
    position: absolute;
    align-self:center;
    margin-top: 150px;
    opacity: 0.25;
}
.head{
    position: relative;
    margin-right: 10px;
}
.hotspot{
    position: absolute;
    /* border: 1px solid #000; */
    top: 5px;
    left: 145px;
    width: 88px;
    height: 80px;
}
.weamLogo{
    height: 54px;
}
.loginForm{
    position: relative;
    margin: 40px 50px 0px 36px;
}
/* .el-input__inner{
    height: 45px;
    margin-bottom: 5px;
} */
.toRegister{
    font-size: 13px;
    color: #09308C;
}
.router1{
    position: absolute;
    left: 280px;
    top: 333px;
}
.loginBtn{
    font-size: 20px;
    font-weight: bold;
}
.icon-shouji{
    margin: 0px;
    padding: 0px;
    font-size: 18px;
}
.icon-suo{
    margin: 0px;
    padding: 0px;
    font-size: 18px;
}
</style>